<template>
  <div>
    <div class="chaxunlianjie">
      <div class="bd2 flex-col">
        <button class="section6 flex-col" @click="addItem">
          <span class="txt5">新增外部链接</span>
        </button>
        <div class="section7 flex-col">
          <ul class="itemlist">
            <li
              v-for="(item,index) in AllPhonenums"
              :id="item.nTid"
              :key="item.id"
              class="main2 flex-row"
            >
              <p class="txt9">外部链接:{{AllPhonenums[index].nLid}}:</p>
              <input
                type="text"
                placeholder="请输入链接名称"
                v-model="item.sName"
                class="box3"
                @blur="nameBlur(item)"
                @change="addAddphonenum"
              />
              <input
                type="text"
                placeholder="请输入链接地址"
                v-model="item.sLinkUrl"
                class="group11 flex-col"
                @blur="phoneBlur(item)"
                @change="addAddphonenum"
              />
              <a
                class="shanchu66"
                v-if="index > 4"
                :id="item.nLid"
                @click="dialogVisible = true"
              >删除</a>
               <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span>此操作将永久删除该文件, 是否继续?</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="DeletePhone(item.nLid)">确 定</el-button>
          </span>
        </el-dialog>
            </li>

            <!-- 点击添加时出现的 -->
            <li class="main2 flex-row" v-show="isShow">
              <p class="txt9">外部链接:</p>
              <input type="text" placeholder="请输入链接名称1" v-model="sName" class="box3" />
              <input type="text" placeholder="请输入链接地址1" v-model="sLinkUrl" class="group11 flex-col" />
            </li>
          </ul>

          <div class="main7 flex-row">
            <button class="wrap3 flex-col" @click="addAddphonenum">
              <span class="word8">保存</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: '',
      isShow: false,
      dialogVisible:false,
      sName: '',
      sLinkUrl: '',
      nLid: 0,
      // 获取所有查询链接接口
      AllPhonenums: [],
      addAllPhonenums: [],
      constants: {},
      // nState:1,
    };
  },
  created () {
    this.GetAllPhonenums()
  },
  methods: {
    nameBlur (e) {
      console.log(e, '失焦');
      this.nLid = e.nLid
      this.sName = e.sName
    },
    phoneBlur (e) {
      this.nLid = e.nLid
      this.sLinkUrl = e.sLinkUrl
    },
    // 添加查询链接接口
    async addAddphonenum () {
      this.isShow = false
      let formData = new FormData()
      formData.append('innTid', 4)
      formData.append('insName', this.sName)
      formData.append('innLid', this.nLid)
      // formData.append('insPictureUrl', this.sPictureUrl)
      formData.append('insLinkUrl', this.sLinkUrl)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_Addlink', formData, config)
      console.log(res, '11');
      let adphone = {
        sName: this.sName,
        sLinkUrl: this.sLinkUrl
      }
      this.addAllPhonenums.push(adphone)
      this.addAllPhonenums
      this.GetAllPhonenums()
      this.sName = ''
      this.sLinkUrl = ''
      // this.$router.go(0)
      this.open2() 

    },
     open2(){
     this.$message({
          message: '保存成功',
          type: 'success'
        });
    },
    // 获取所有查询链接
    async GetAllPhonenums () {
      const { data: res } = await this.$http.get('/api/link/Get_Selectlinks', {
        params: {
          innTid: 4
        }
      })
      console.log(res);
      this.AllPhonenums = res

    },
    // 删除电话
    async DeletePhone (nLid) {
      this. dialogVisible=false
      console.log(nLid)
      this.nLid = nLid
      let formData = new FormData()
      formData.append('innLid', this.nLid)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_deletelink', formData, config)
      console.log(res);
      // this.DeletePhone = res
      this.GetAllPhonenums()
         this.$message({
            type: 'success',
            message: '删除成功!'
          });
    },

    // 添加电话
    addItem () {
      // 插入数据到数据库
      this.isShow = true
      // this.AllPhonenums.push({})
      // this.addsOName = ''
      // this.addsPhone = ''
    },
    // del (delIndex) {
    //   this.AllPhonenums.splice(delIndex, 1)
    // },
    onClick_2 () {
      alert(1);
    }
  }
};
</script>
<style scoped lang="css" src="./assets/index.css" />
